<template>
	<view class="root-box root-container root-page-top">
		<uv-navbar @leftClick="goBack" placeholder bgColor="transparent" :fixed="false"/>
		<view class="content" v-if="Object.keys(agentData).length>0">
			<uv-search inputAlign="left" searchIconColor="red" searchIcon="bell" :showAction="false" :placeholder="placeholderTxt"></uv-search>
			<view class="plan-box">
				<view class="plan-item" @click="navigate('/pages-agent/residential')">
					<uv-text text="小区数量" size="16" color="#333" bold style="" />
					<uv-text :text="agentData.community_num||0" size="20" color="#333" bold style="padding-top: 20rpx;" />
				</view>
				<view class="plan-item" @click="navigate('/pages-agent/stewards')">
					<uv-text text="管家数量" size="16" color="#333" bold style="" />
					<uv-text :text="agentData.butler_num||0" size="20" color="#333" bold style="padding-top: 20rpx;" />
				</view>
				<view class="plan-item"  @click="navigate('/pages-agent/revenue_users')">
					<uv-text text="用户数量" size="16" color="#333" bold style="" />
					<uv-text :text="agentData.user_num||0" size="20" color="#333" bold style="padding-top: 20rpx;" />
				</view>
			</view>
			<view class="revenue-title-box" >
				<uv-icon name="red-packet" color="red" size="28" style=""></uv-icon>
				<uv-text text="收益" size="16" color="#333" bold style="" />
			</view>
			
			<!-- <view class="revenue-item-box">
				<view class="revenue-item">
					<view class="item-top">
						<text>今日收益</text>
					</view>
					<view class="item-bottom">
						0
					</view>
				</view>
				<view class="revenue-item">
					<view class="item-top">
						累计收益
					</view>
					<view class="item-bottom">
						0
					</view>
				</view>
				
			</view> -->
			
			<view class="revenue-item-box">
				<view class="revenue-item">
					<view class="item-top-box">
						<text>今日邻工收益</text>
						<tui-icon name="arrowright" :size="24" color="#ffffff"></tui-icon>
					</view>
					<view class="item-bottom">
						{{agentData.today_neighbor_workers_revenue||0}}
					</view>
				</view>
				<view class="revenue-item">
					<view class="item-top">
						累计邻工收益
					</view>
					<view class="item-bottom">
						{{agentData.today_neighbor_workers_revenue||0}}
					</view>
				</view>
				
			</view>
			
			<view class="revenue-item-box">
				<view class="revenue-item">
					<view class="item-top-box">
						<text>服务产品收益</text>
						<tui-icon name="arrowright" :size="24" color="#ffffff"></tui-icon>
					</view>
					<view class="item-bottom">
						{{agentData.today_mechanic_revenue||0}}
					</view>
				</view>
				<view class="revenue-item">
					<view class="item-top">
						累计服务产品收益
					</view>
					<view class="item-bottom">
						{{agentData.cumulative_mechanic_revenue||0}}
					</view>
				</view>
				
			</view>
			
			<view class="revenue-item-box">
				<view class="revenue-item">
					<view class="item-top-box">
						<text>邻集市收益</text>
						<tui-icon name="arrowright" :size="24" color="#ffffff"></tui-icon>
					</view>
					<view class="item-bottom">
						{{agentData.today_neighboring_market_revenue||0}}
					</view>
				</view>
				<view class="revenue-item">
					<view class="item-top">
						累计邻集市收益
					</view>
					<view class="item-bottom">
						{{agentData.cumulative_neighboring_market_revenue||0}}
					</view>
				</view>
				
			</view>
			
			<!-- <view class="revenue-item-box">
				<view class="revenue-item">
					<view class="item-top-box">
						<text>福卡收益</text>
						<tui-icon name="arrowright" :size="24" color="#ffffff"></tui-icon>
					</view>
					<view class="item-bottom">
						0
					</view>
				</view>
				<view class="revenue-item">
					<view class="item-top">
						累计福卡收益
					</view>
					<view class="item-bottom">
						0
					</view>
				</view>
			</view> -->
		</view>
		<uv-tabbar :value="tabValue" @change="changePage(index)" activeColor="red">
			<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue'
    import { agentProfileData } from '@/api/other.js'
	import { navigate } from '@/util/tools.js';
	import { useCustomBack } from '@/components/useCustomBack.js'
	const { goBack } = useCustomBack('/pages-user/select_Identity')
	const agentData = reactive({})
	const tabValue = ref(0)
	const placeholderTxt=ref('暂无新消息')

	const getAgentData = async()=> {
		const res = await agentProfileData()
		if(res.code==200){
			Object.assign(agentData,res.result)
		}
	}
	
	
	const init = async () => {
		await getAgentData()
	}
	
	
	const changePage=(index)=>{
		if(tabValue.value == 0){
			uni.navigateTo({
			  url: '/pages-user/distributor/index',
			  success: function(res) {
			   
			  },
			  fail: function(err) {
			    
			  }
			})
		}
	}
	
	init()
</script>

<style lang="scss" scoped>
	.root-box{
		.content{
			padding: 30rpx;
			box-sizing: border-box;
			
		}
	}
	.plan-box{
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 60rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		box-shadow: 5rpx 5rpx 5rpx #cccccc;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.plan-item{
			width:200rpx;
			display: flex;
		
			flex-direction: column;
			align-items: center;
			::v-deep .uv-text {
				 width: auto !important;
			}
		}
	}
	.revenue-title-box{
		display: flex;
		box-sizing: border-box;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.revenue-item-box{
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		margin-top: 20rpx;
		.revenue-item{
			width:335rpx;
			height:150rpx;
			background-color: #fff;
			box-shadow: 3rpx 3rpx 3rpx #cccccc;
			border-radius: 15rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			.item-top{
				height: 50rpx;
				width: 100%;
				background-color: red;
				text-align: center;
				line-height: 50rpx;
				color: #fff;
				font-size: 24rpx;
			}
			.item-top-box{
				height: 50rpx;
				width: 100%;
				background-color: red;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 24rpx;
			}
			.item-bottom{
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				color: #333;
				font-size: 32rpx;
			}
		}
	}
	
	
	
	
	
	
	
	
</style>